<template>
	<view class="detail-container">
		<!-- 详情卡片 -->
		<view class="detail-card">
			<view class="card-title">客户信息</view>
			<view class="detail-list">
				<view class="detail-item">
					<text class="item-label">名称</text>
					<text class="item-value">{{ customerInfo.name || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">国家</text>
					<text class="item-value">{{ customerInfo.country || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">省份</text>
					<text class="item-value">{{ customerInfo.state || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">城市</text>
					<text class="item-value">{{ customerInfo.city || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">邮政编码</text>
					<text class="item-value">{{ customerInfo.zip || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">地址</text>
					<text class="item-value">{{ customerInfo.address || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">地址二</text>
					<text class="item-value">{{ customerInfo.address2 || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">手机号码</text>
					<text class="item-value">{{ customerInfo.phone || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">电子邮箱</text>
					<text class="item-value">{{ customerInfo.email || '-' }}</text>
				</view>
				
				<view class="detail-item">
					<text class="item-label">说明</text>
					<text class="item-value">{{ customerInfo.additionalInfo?.description || '-' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request.js'

export default {
	data() {
		return {
			customerId: '',
			customerInfo: {}
		}
	},
	
	onLoad(options) {
		this.customerId = options.id
		
		// 获取上一页传递的数据
		const eventChannel = this.getOpenerEventChannel()
		eventChannel.on('customerData', (data) => {
			this.customerInfo = data.data
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: this.customerInfo.name || '客户详情'
			})
		})
	}
}
</script>

<style>
.detail-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.detail-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
}

.card-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 30rpx;
}

.detail-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16rpx 0;
	border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
	border-bottom: none;
}

.item-label {
	font-size: 28rpx;
	color: #666;
	min-width: 140rpx;
	margin-right: 20rpx;
}

.item-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
	word-break: break-all;
}
</style>
